import React, { useEffect, useState } from "react";
import http from "../../api/http";
import { SearchBar, Card, IndexBar, List, Tag } from "antd-mobile";
function Index() {
  const [CityList, setCityList] = useState([]);
  const [HotList, setHotList] = useState([]);
  const [SearVal,setSearVal]=useState([])
  const getList = async () => {
    const res = await http.get("/api/city");
    console.log(res);
    const { data } = res.data;
    setCityList(data.city);
    setHotList(data.hotCities);
  };
  useEffect(() => {
    getList();
  });

  
  return (
    <div>
      <SearchBar placeholder="请输入内容"
       onChange={(val) => {
          setSearVal(val)
       }} 
       />
      <Card title="热门城市">
        {HotList?.map((item, index) => (
          <Tag color="warning" key={index} style={{ margin: 15 }}>
            {item.name}
          </Tag>
        ))}
      </Card>
      <Card title="城市列表">
        <div style={{ height: window.innerHeight }}>
          <IndexBar>
            {CityList?.map((group) => {
              const { initial, list } = group;
              return (
                <IndexBar.Panel
                  index={initial}
                  title={`标题${initial}`}
                  key={`标题${initial}`}
                >
                  <List>
                    {list.map((item, index) => (
                      <List.Item key={index}>{item.name}</List.Item>
                    ))}
                  </List>
                </IndexBar.Panel>
              );
            })}
          </IndexBar>
        </div>
      </Card>
    </div>
  );
}

export default Index;
